<!DOCTYPE html>
<!-- 支付页 -->
<!-- @author DHC -->
<!-- 2020/04/25 -->
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />
		<script src="../../Common/js/tools.js"></script>
		<script src="../../Common/js/jump.js"></script>
		<script src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../../Common/js/lib/materialize.min.js"></script>
		<link rel="stylesheet" href="../../Common/css/ufun.css" />
		<link rel="stylesheet" href="../../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<style>
			#Payment {
				display: block;
				width: max-content;
				margin: 5vw auto;
			}
			
			.payment-btn {
				display: inline-block;
				margin: 0 2vw;
				padding: 1vw 0;
				text-align: center;
				font-size: 4vw;
				width: 20vw;
				color: var(--color-black);
				background-color: var(--color-white);
				border: 1px solid var(--color-black);
				border-radius: 2vw;
			}
			
			.payment-btn.active {
				color: var(--color-yellow);
				border: 1px solid var(--color-yellow);
			}
			
			#Money {
				width: 100vw;
				text-align: center;
			}
			
			#Money::before {
				content: "¥";
				font-size: 8vw;
				color: var(--color-yellow);
			}
			
			#MoneyInput {
				width: 29vw;
				/* height: 10.5vw; */
				font-size: 8vw;
				outline: none;
				border-style: none;
				border-bottom: 1px solid var(--color-yellow);
				text-align: center;
				color: var(--color-yellow);
			}
			
			#MoneyInput:focus {
				box-shadow: none;
			}
			
			#MoneyInput::placeholder {
				color: var(--color-gray-light);
			}
		</style>
	</head>
	<body>
		<header>
			<div id="Left" class="com-btn" onmouseup="BackCheck(ThisBack);">
				<i class="material-icons">keyboard_arrow_left</i>
			</div>
			<div id="Title">设置入场费</div>
			<div id="Right" class="com-btn" onmouseup="nextPage();">发布</div>
		</header>
		<div class="content">
			<div id="Payment">
				<div onclick="payment(true);" class="payment-btn" id="BTN0">付费</div>
				<div onclick="payment(false);" class="payment-btn" id="BTN1">免费</div>
			</div>
			<div id="Paid">
				<div id="Money">
					<!-- <p id="MoneySign">¥</p> -->
					<input type="number" id="MoneyInput" size="2" placeholder="0.00" onKeyUp="amount(this)" onBlur="overFormat(this)" />
				</div>
				<div class="center" style="color: var(--color-gray-medium);">
					<p>每位用户只有在支付相应的金额后</p>
					<p>才能查看本讲座的内容</p>
				</div>
			</div>
			<div id="Free">
				<div class="center" style="color: var(--color-gray-medium);">
					<p>每位用户都可以免费</p>
					<p>查看本讲座的内容</p>
				</div>
			</div>
		</div>
	</body>
	<script>
		var userHash;
		var current;
		var titleText;
		var introText;
		var contentText;
		var coverImg;
		var tags;
		var money;
		var havePayment;
		var btn0 = $("#BTN0")[0];
		var btn1 = $("#BTN1")[0];
		
		document.addEventListener('plusready', function() {
			GetStatusTop();
			userHash = plus.storage.getItem("userHash");
			current = plus.webview.currentWebview();
			titleText = current.title;
			introText = current.intro;
			contentText = current.content;
			havePayment = current.havePayment;
			coverImg = current.coverImg;
			tags = current.tags;
			DoShow(current);
		});
		
		//-------------------------
		//  支付与发布问题
		//-------------------------
		function nextPage() {
			submit();
		}

		function submit() {
			money = ID("MoneyInput").value;
			if (money.trim() == "")
				money = 0;
			if (havePayment) {
				if (money === 0) {
					plus.nativeUI.alert("付费讲座的入场费不能为0！", "确认入场费");
					return;
				}
			} else {
				money = 0;
			}

			CallAJAX("changeLec", {
				"userHash": userHash,
				"lecTitle": titleText,
				"lecIntro": introText,
				"lecText": contentText,
				"lecCoverImg": coverImg,
				"lecCharge": parseFloat(money),
				"lecTags": tags,
				"action": "write"
			}, function(data) {
				switch (data["res"]) {
					case "ok":
						OpenWebView('5.html', 'NewLec5', {}, {
							"lecId": data["lecId"]
						});
						break;
					default:
						console.log(JSON.stringify(data));
						plus.nativeUI.alert("发生未知错误！", "发布失败");
						break;
				}
			});
		}
		
		function payment(flag) {
			if (flag) {
				btn0.classList.add('active');
				btn1.classList.remove('active');
				ID('Free').style.display = 'none';
				ID('Paid').style.display = 'block';
			} else {
				btn1.classList.add('active');
				btn0.classList.remove('active');
				ID('Free').style.display = 'block';
				ID('Paid').style.display = 'none';
			}
			havePayment = flag;
		}
		payment(true);
		
		//---------------------------------------------------
		// 处理金钱输入框 用的轮子
		//---------------------------------------------------
		// 控制输入金额
		function amount(th) {
			var regStrs = [
				['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位�?  
				['[^\\d\\.]+$', ''], //禁止录入任何非数字和点 �?					        
				['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点  
				['^(\\d+\\.\\d{2}).+', '$1'] //禁止录入小数点后两位以上  
			];
			for (var i = 0; i < regStrs.length; i++) {
				var reg = new RegExp(regStrs[i][0]);
				th.value = th.value.replace(reg, regStrs[i][1]);
			}
		}
		// 录入完成后，输入模式失去焦点后对录入进行判断并强制更改，并对小数点补全  
		function overFormat(th) {
			var v = th.value;
			if (v === '' || parseFloat(v) === 0) {
				v = '';
			} else if (/^0+\d+\.?\d*.*$/.test(v)) {
				v = v.replace(/^0+(\d+\.?\d*).*$/, '$1');
				v = inp.getRightPriceFormat(v).val;
			} else if (/^0\.\d$/.test(v)) {
				v = v + '0';
			} else if (!/^\d+\.\d{2}$/.test(v)) {
				if (/^\d+\.\d{2}.+/.test(v)) {
					v = v.replace(/^(\d+\.\d{2}).*$/, '$1');
				} else if (/^\d+$/.test(v)) {
					v = v + '.00';
				} else if (/^\d+\.$/.test(v)) {
					v = v + '00';
				} else if (/^\d+\.\d$/.test(v)) {
					v = v + '0';
				} else if (/^[^\d]+\d+\.?\d*$/.test(v)) {
					v = v.replace(/^[^\d]+(\d+\.?\d*)$/, '$1');
				} else if (/\d+/.test(v)) {
					v = v.replace(/^[^\d]*(\d+\.?\d*).*$/, '$1');
					ty = false;
				} else if (/^0+\d+\.?\d*$/.test(v)) {
					v = v.replace(/^0+(\d+\.?\d*)$/, '$1');
					ty = false;
				} else {
					v = '';
				}
			}
			th.value = v;
		}
	</script>
</html>
